page-contact {
  video { width: 100%; }
  .video-box { position: relative; }
  .video-ctrl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
  .btn-play-pause { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background: rgba(0, 0, 0, .3); border-radius: 100%; margin: -25px 0 0 -25px; }
  .btn-play-pause.pause { border: 3px solid #fa6470; }
  .bottom-box { display: flex; position: absolute; bottom: 0; left: 0; right: 0; padding: 3px; background: rgba(0, 0, 0, .3); color: #fff; }
  .bottom-box .btn { padding: 2px 3px; font-size: 10px; }
  .bottom-box .download-btn { }
  .progress-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
  .progress-wrap .time { padding: 0 2px; font-size: 10px; transform: scale(.8); }
  .progress-wrap .progress-box { flex: 1; position: relative; height: 2px; margin: 0 5px; background: rgba(255, 255, 255, .5); border-radius: 100%; }
  .progress-wrap .progress-box .bar { position: absolute; height: 2px; left: 0; top: 50%; width: 0; transform: translateY(-50%); }
  .progress-wrap .progress-box .progress-bar { background: #ff6f6c; }
  .progress-wrap .progress-box .progress-bar i { position: absolute; right: 0; top: 0; height: 10px; width: 10px; background: #fff; transform: translate(5px, -4px); border-radius: 100%; }
  .progress-wrap .progress-box .progress-bar i::after { content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; }
  .progress-wrap .progress-box .buffer-bar { background: #fff; }
  .bottom-box .full-screen { }
  
  .download-box { display: flex; }
  .download-box div { flex: 1; padding: 3px; margin: 15px; box-shadow: 0 0 1px #ccc; text-align: center; }
  .download-path { margin: 0 15px; padding: 3px 7px; border-left: 3px solid #aaa; background: #eee; }
}
